<template>
  <div id="singerInfo">
    <div class="container">
      <div class="left">
        <div class="title">
          <h2>{{artist.artist.name}}</h2>
          <h3>{{artist.artist.alias[0]}}</h3>
        </div>
        <div >
            <img
          :src="artist.artist.picUrl+'?param=640y300'"
            alt
          />
        </div>
      
        <div class="butt">
          <el-button-group>
            <el-button type="primary" icon="el-icon-video-play" @click="play(artist.hotSongs[0].id)">播放</el-button>
            <el-button type="primary" icon="el-icon-plus"></el-button>
          </el-button-group>
          
        </div>
        <table>
            <!-- <thead>
                <tr>
                    <th>序号</th>
                    <th>歌名</th>
                    <th>时长</th>
                    <th>专辑</th>
                </tr>
            </thead> -->
            <tbody>
                <tr v-for="(item,index) in artist.hotSongs" :key="index">
                    <td>{{index+1}}</td>
                    <td>
                    <!-- <td><el-button icon="el-icon-video-play" circle></el-button></td> -->
                    <button class="el-icon-video-play" @click="play(item.id)"></button>&nbsp;<a :href="'#/discover/musicInfo/id='+item.id" style="color:#000;text-decoration: none;">{{item.name}}</a></td>
                    <td>{{changtime(item.dt)}}</td>
                    <td><a :href="'#/discover/albumInfo/id='+item.al.id" style="color:#000;text-decoration: none;">{{item.al.name}}</a></td>
                </tr>
            </tbody>
        </table>

      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
//import { mapMutations }  from 'vuex'
export default {
    name:"SingerInfo",
    //接收传进来的id
    props:["id"],
    data() {
    return {
        //歌手信息
        artist:{},
    }
    },
    methods: {
        changtime:function(time){
        //this.$store.commit('changeMusicTime',time)
            return this.$store.getters.changeMusicTime(time)
        },
        //拿到歌手信息
        seach(){
            axios
              .get(
                "https://api.imjad.cn/cloudmusic/?type=artist&id=" +this.id
              )
              .then(input => {
                this.artist=input.data
                // console.log(input.data);
                // this.artistids=this.artistList
                // console.log(input.data.artist.img1v1Url);
              })
              .catch(err => {
                console.log(err);
              });
        },
        play(id){
            this.$store.commit('chang',id)
        }
    },
    mounted() {
    this.seach();
  }
}
</script>

<style>
#singerInfo .container {
  margin-left: 150px;
  width: 980px;
  border: 1px #e1e1e1;
  border-style: none solid;
  margin: 0 auto;
}
#singerInfo h2 {
  overflow: hidden;
  display: inline-block;
  height: 34px;
  margin-top: 20px;
  font-weight: normal;
    font-size: 24px;
    color: #333;
}
#singerInfo h3 {
  overflow: hidden;
  display: inline-block;
  padding-left: 10px;
    font-size: 14px;
    line-height: 30px;
    color: #999;
}
#singerInfo img {
  width: 640px;
  height: 300px;
}
#singerInfo .el-button {
  /* padding: 5px; */
  height: 30px;
  line-height: 20px;
  font-size: 18px;
  /* color: pink; */
  text-align: center;
  padding: 5px;
  margin: 10px 0px;
  
}
#singerInfo .left{
    width: 630px;
    padding: 0px 40px;
     border-right: 1px #e1e1e1 solid;
}
#singerInfo .left table{
    border-collapse:collapse;
    width: 640px;
}
#singerInfo .left table td{
    /* text-align: center; */
    padding: 10px 10px;
    font-size: 12px;
}
#singerInfo .left table tr:nth-child(odd){
    background-color: #F7F7F7;
}
#singerInfo .el-icon-video-play{
    border: none;
    font-size: 20px;
    border-radius: 50%;
}
</style>